<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
            margin: 0 auto;

        }
        div{
            width:800px;
            height:600px;
            margin:0 auto;
            box-shadow: 3px 3px 5px #888;
            position:relative;
        }
        #btn{
            width:40px;
            height:40px;
            border-radius: 50%;
            background:red;
            position: absolute;
            left:10%;
            top:10%;
            margin:-20px 0 0 -20px;
        }
        #btn2{
            width:40px;
            height:40px;
            border-radius: 50%;
            background:blue;
            position: absolute;
            left:50%;
            top:50%;
            margin:-20px 0 0 -20px;
        }
    </style>
</head>
<body>
<div>
     <canvas id="canvas"></canvas>
     <span id="btn"></span>
     <span id="btn2"></span>
</div>
</body>
     <script>
         var canvas = document.getElementById("canvas");
         var ctx = canvas.getContext("2d");
         canvas.width = 800;
         canvas.height = 600;




         var pos = canvas.getBoundingClientRect();
         btn.onmousedown = function(e){
             var event = e || window.event;
             event.preventDefault();
             onOff = true;
             if(onOff){
                 document.onmousemove = function(e){
                     var event = e || window.event;
                     event.preventDefault();
                     var c = event.clientX - pos.left;
                     var d = event.clientY - pos.top;
                     var x =  btn.offsetLeft;
                     var y =  btn.offsetTop;
                     var a = btn2.offsetLeft;
                     var b = btn2.offsetTop;
                     btn.style.left = c + "px";
                     btn.style.top = d + "px";
                     console.log(a,b,x,y);
                     ctx.clearRect(0,0,canvas.width,canvas.height)
                     bsr(x,y,a,b);
                 }
             }
         }
         btn.onmouseup = function(e){
             var event = e || window.event;
             event.preventDefault();
             onOff = false;
             document.onmousemove = null;
         }
         btn2.onmousedown = function(e){
             var event = e || window.event;
             event.preventDefault();
             onOff = true;
             if(onOff){
                 document.onmousemove = function(e){
                     var event = e || window.event;
                     event.preventDefault();
                     var a = btn2.offsetLeft;
                     var b = btn2.offsetTop;
                     var c = event.clientX - pos.left;
                     var d = event.clientY - pos.top;
                     var x =  btn.offsetLeft;
                     var y =  btn.offsetTop;
                     btn2.style.left = c + "px";
                     btn2.style.top = d + "px";
                     ctx.clearRect(0,0,canvas.width,canvas.height)
                    console.log(a,b,x,y);
                     bsr(x,y,a,b);
                 }
             }
         }
         btn2.onmouseup = function(e){
             var event = e || window.event;
             event.preventDefault();
             onOff = false;
             document.onmousemove = null;
         }

         function bsr(x,y,a,b){

             ctx.beginPath();
             ctx.moveTo(0,600);
             ctx.bezierCurveTo(x,y,a,b,800,600);
             ctx.stroke();

             ctx.closePath();

             ctx.beginPath();
             ctx.moveTo(0,600);
             ctx.lineTo(x,y);
             ctx.stroke();
             ctx.closePath();
             ctx.beginPath();
             ctx.moveTo(800,600);
             ctx.lineTo(a,b);
             ctx.stroke();
             ctx.closePath();
         }
     </script>
</html>